<template>
  <div id="">
    <el-amap-search-box class="search-box"
      :search-option="searchOption"
      :on-search-result="onSearchResult">
    </el-amap-search-box>

    <el-amap vid="amapDemo" :amap-manager="amapManager" :center="mapCenter" :zoom="12" :events="events" class="amap-demo">
      <el-amap-marker v-for="(marker, index) in markers"
      :key="marker.key"
      :position="marker.position"
      :events="marker.events"
      :visible="marker.visible"
      :draggable="marker.draggable"
      :vid="index"
      :topWhenClick="true"></el-amap-marker>
    </el-amap>

    <div class="fixedBottom">
      <button type="button" name="button" class="blockBtn" @click="communitySearch">确定</button>
    </div>

  </div>
</template>
<script>
// NPM 方式
// import { amapManager } from 'vue-amap';
import AMap from 'AMap'
import VueAMap from 'vue-amap';
let amapManager = new VueAMap.AMapManager();

export default {
  name: "",
  data: () => ({
    amapManager,
    zoom: 12,
    mapCenter: [118.589421,24.908853],
    searchValue:'',
    searchOption: {
      city: '泉州',
      citylimit: false  //是否限制城市内搜索
    },
    searchPoi:'',       //存储点击的marker
    poiIdx:0,
    adcode:'',        //地区编码
    markerPoi:[],
    markers: [],
    events: {

    },
  }),
  components: {

  },
  mounted() {
    //do something after mounting vue instance
    let markers = [];
    let that = this;
    markers.push(
      {
        position: [121.5273285, 31.21515044],
        events: {
          click: (e) => {
            console.log(this);
            let lnglat = e.lnglat;
            that.markerPoi = lnglat;
            that.$nextTick(() => {
              // that.window.visible = true;
            });
          },
        },
        visible: true,
        draggable: false,
        // template: '<span>1</span>',
      }
    );
    that.markers = markers;
  },

  methods: {
    // 逆地址编码获取adcode
    geocode(lng,lat) {
      let that = this;
      var geocoder = new AMap.Geocoder({
          radius: 1000,
          extensions: "all"
        });
      geocoder.getAddress([lng, lat], function (status, result) {
        if (status === 'complete' && result.info === 'OK') {
          if (result && result.regeocode) {
            // that.address = result.regeocode.formattedAddress;
            that.adcode = result.regeocode.addressComponent.adcode;
            // that.$nextTick();
          }
        }
      });
    },
    onSearchResult(pois) {
      console.log(pois);
      var that = this;
      that.searchPoi = pois[0];   //查找后初始化点信息为第一个搜索的点

      that.geocode(pois[0].lng, pois[0].lat);

      let markers = [];
      let latSum = 0;
      let lngSum = 0;
      if (pois.length > 0) {
        for (var i = 0; i < pois.length; i++) {
          let poi = pois[i];
          let lng = poi.lng;
          let lat = poi.lat;
          lngSum += lng;
          latSum += lat;
          markers.push({
            position:[lng, lat],
            events: {
              click: (e) => {
                that.searchPoi = poi;
                that.mapCenter = [lng, lat];
                let lnglat = e.lnglat;
                that.markerPoi = lnglat;
                console.log(VueAMap);

                that.geocode(lng,lat);
              },
            },
            visible: true,
            draggable: false,
          })
        }
        that.markers = markers;
        let center = {
          lng: lngSum / pois.length,
          lat: latSum / pois.length
        };
        that.mapCenter = [center.lng, center.lat];
      }
    },
    // 点击确定按钮，返回父组件并传递参数
    communitySearch() {
      var that = this;
      this.$emit('communityMapEvent',{
        communityPoi:that.searchPoi,    //选择的点信息
        adcode:that.adcode
      });
    }
  }
}
</script>
<style lang="scss" scoped>
.search-box {
     position: absolute;
     top: 25px;
     left: 10px;
   }
.amap-page-container {
    height: 100vh;

  }
</style>
